<template>
  <div class="timing">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- <el-form-item label="请求名称">
        <el-input v-model="formInline.requestName" clearable placeholder="请输入请求名称" />
      </el-form-item> -->
      <el-form-item label="访问对象">
        <el-select v-model="formInline.appKey" clearable placeholder="请选择">
          <el-option v-for="(item,index) in options" :key="index" :label="item.serverObjectName" :value="item.appKey" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUserList">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <admincentertb
      ref="httbRef"
      :btn-is-show="btnIsShow"
      :table-col="tabUserList"
      :table-data="tableUserData"
      @getDataDetileInfo="getDataDetileInfo"
      @deleteSelectData="deleteSelectData"
      @refresh="getUserList"
    />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import request from '@/utils/request'
export default {
  components: { },
  data() {
    return {
      btnIsShow: {
        operate: false,
        detile: false,
        example: false,
        getDetile: true,
        update: false,
        del: false
      },
      rules: {},
      formInline: {
        requestName: '',
        appKey: ''
      },
      tableUserData: [],
      options: [],
      tabUserList: [
        {
          key: 'appKey',
          title: '访问对象'
        },
        {
          key: 'requestCount',
          title: '访问次数'
        },
        {
          key: 'totalData',
          title: '访问条数'
        },
        {
          key: 'successData',
          title: '成功数量'
        },
        {
          key: 'errorData',
          title: '失败数量'
        },
        {
          key: 'successRate',
          title: '成功率'
        }
      ],
      vObj: null,
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {
    request({
      url: '/ht-datacenter/fire/dataShareSystemLogs/getServerObject',
      method: 'post',
      data: {}
    }).then(res => {
      if (res.code == 200) {
        this.options = res.data
      }
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false
      this.$refs.httbRef.isShowLoading(true)
      const that = this
      request({
        url: '/ht-datacenter/fire/dataShareSystemLogs/getDataShareSystemLogs',
        method: 'post',
        data: {
          'page': this.page,
          'limit': this.size,
          ...that.formInline
        }
      }).then(res => {
        if (res.code == 200) {
          this.tableUserData = res.data.records
          this.total = Number(res.data.total)
          this.$refs.httbRef.isShowLoading(false)
        } else {
          that.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
    .fromClass{
      padding: 20px 0;
    }
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }

        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px 10px;
          }
        </style>
